<script setup>
import { inject } from 'vue'

const model = defineModel()
const connection = inject('connection')
</script>

<template>
    <n-modal v-model:show="model">
        <n-card
            class="w-50"
            title="系统通知"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true">
            <n-flex justify="space-between">
                <n-checkbox-group v-model:value="connection.confirmOptions.re">
                    <n-checkbox value="DISPLAY" label="已读" />
                    <n-checkbox value="DISPLAY" label="未读" />
                    <n-checkbox value="DISPLAY" label="今天" />
                    <n-checkbox value="AUTO_CONFIRM" label="全部删除" />
                </n-checkbox-group>
            </n-flex>
            <n-flex vertical size="medium">
                <n-scrollbar class="h-75">
                    <n-alert
                        :title="item.data.title"
                        type="info"
                        v-for="(item, index) in connection.messages">
                        <n-flex align="center" justify="space-between">
                            <div>
                                <div>{{ item.data.description }}</div>
                                <div>{{ item.data.options }}</div>
                                <div>{{ item.data.data }}</div>
                            </div>
                            <n-button-group>
                                <n-button type="info">配置</n-button>
                                <n-button
                                    type="success"
                                    @click="connection.confirm(item, index, true)">
                                    关闭
                                </n-button>
                            </n-button-group>
                        </n-flex>
                    </n-alert>
                </n-scrollbar>
            </n-flex>
        </n-card>
    </n-modal>
    <n-notification-provider :max="3" placement="bottom-right"></n-notification-provider>
</template>
